<script setup lang="ts">
import { ref } from 'vue'
import * as Y from 'yjs'

let isShow = ref(false);
let content = ref("");

let encodedDocument = null;

(() => {
    const ydoc = new Y.Doc();
    const ytext = ydoc.getText('benchmark');

    // Insert one million 'y' characters from right to left
    for (let i = 0; i < 100000; i++) {
        ytext.insert(0, 'y');
    }

    // transform ydoc to its binary representation
    encodedDocument = Y.encodeStateAsUpdate(ydoc);
})();

content.value += `docSize:${encodedDocument.byteLength} bytes`;

// Measure time to load the Yjs document containing 1M chars
const start = Date.now()
const ydoc2 = new Y.Doc()
Y.applyUpdate(ydoc2, encodedDocument)

content.value += `parseTime:${Date.now() - start}ms`// => 368.39 ms

</script>

<template>
    <div class="hide"><input type="button" :value="`${isShow ? 'hide' : 'show'} yjs 2`" @click="isShow = !isShow"></div>
    <div v-if="isShow">
        <div class="desc">Y JS 示例 ：Y.Doc 插入 10w 个 y字符耗时</div>
        <div>content: <span class="content">{{ content }}</span></div>
    </div>
</template>

<style scoped></style>